<template>
    <div class="menu-bar">
        <transition name="slide-up">
            <div class="menu-wrapper" :class="{'hide-box-shadow': !menuVisible || settingVisible >= 0}" v-show="menuVisible">
                <div class="icon-wrapper">
                    <span class="icon-menu" @click="showSetting(3)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-progress" @click="showSetting(2)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-bright" @click="showSetting(1)"></span>
                </div>
                <div class="icon-wrapper">
                    <span class="icon-a" @click="showSetting(0)">A</span>
                </div>
            </div>
        </transition>
       
        <!-- <content-view :ifShowContent="ifShowContent"
                        v-show="ifShowContent"
                        :navigation="navigation"
                        :bookAvailable="bookAvailable"
                        @jumpTo="jumpTo"></content-view>
        <transition name="fade">
            <div class="content-mask" v-show="idShowContent" @click="hideContent">

            </div>
        </transition> -->
        <ebook-setting-font></ebook-setting-font>
        <ebook-setting-font-popup></ebook-setting-font-popup>
        <ebook-setting-theme></ebook-setting-theme>
    </div>
</template>

<script>
    import EbookSettingFont from './EbookSettingFont'
    import EbookSettingFontPopup from './EbookSettingFontPopup'
    import EbookSettingTheme from './EbookSettingTheme'
    import { ebookMixin } from '../../utils/mixin'
    // import ContentView from '@/components.Contents'
    export default {
        // components: {
        //     ContentView
        // },
        // data () {
        //     return {
        //         ifSettingShow: false,
        //         fontSizeList: [
        //             { fontSize: 12 },
        //             { fontSize: 14 },
        //             { fontSize: 16 },
        //             { fontSize: 18 },
        //             { fontSize: 20 },
        //             { fontSize: 22 },
        //             { fontSize: 24 }
        //         ],
        //         defaultFontSize: 16,
        //         themeList: [
        //             {
        //                 name: 'default',
        //                 style: {
        //                     body: {
        //                         'color': '#000',
        //                         'background': '#fff'
        //                     }
        //                 }
        //             },
        //             {
        //                 name: 'eye',
        //                 style: {
        //                     body: {
        //                         'color': '#000',
        //                         'background': '#ceeaba'
        //                     }
        //                 }
        //             },
        //             {
        //                 name: 'night',
        //                 style: {
        //                     body: {
        //                         'color': '#fff',
        //                         'background': '#000'
        //                     }
        //                 }
        //             },
        //             {
        //                 name: 'gold',
        //                 style: {
        //                     body: {
        //                         'color': '#000',
        //                         'background': 'rgb(241,236,236)'
        //                     }
        //                 }
        //             }
        //         ],
        //         defaultTheme: 0,
        //         showTag: 0,
        //         progress: 0,
        //         ifShowContent: false
        //     }
        // },
        mixins: [ebookMixin],
        components: {
            EbookSettingFont,
            EbookSettingFontPopup,
            EbookSettingTheme
        },
        methods: {
            // setFontSize (fontSize) {

            // },
            showSetting (key) {
                this.setSettingVisible(key)
                
            },
            // hideSetting () {
            //     this.ifSettingShow = false
            // },
            // setTheme (index) {

            // },
            // // 拖动进度条时触发事件
            // onProgressInput (progress) {
            //     this.progress = progress
            //     this.$refs.progress.style.backgroundSize = `${this.progress}% 100%`
            // },
            // // 进度条松开后触发事件，根据进度条数值跳转到指定位置
            // onProgressChange (progress) {
            //     this.$emit('onProgressChange', progress)
            // },
            // hideContent () {
            //     this.ifShowContent = false
            // }

        }
    }
</script>

<style lang="scss" scoped>
    @import '../../assets/styles/global';
    .menu-bar {
        position: relative;
        .menu-wrapper {
            position: absolute;
            bottom: 0;
            left: 0;
            z-index: 101;
            display: flex;
            width: 100%;
            height: px2rem(48);
            background: #ffffff;
            box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,0.15);
            font-size: px2rem(20);
            .icon-wrapper {
                flex: 1;
                @include center;
                .icon-progress {
                    font-size: px2rem(28);
                }
                .icon-bright {
                    font-size: px2rem(24);
                }
            }
        }
        .hide-box-shadow {
            box-shadow: none;
        }

        // .setting-wrapper {
        //     position: absolute;
        //     bottom: px2rem(48);
        //     left: 0;
        //     z-index: 101;
        //     display: flex;
        //     width: 100%;
        //     height: px2rem(60);
        //     background: #ffffff;
        //     box-shadow: 0 px2rem(-8) px2rem(8) rgba(0,0,0,0.15);
        //     .setting-font-size {
        //         width: 100%;
        //         height: 100%;
        //         display: flex;
        //         .preview {
        //             flex: 0 0 px2rem(40);
        //             @include center;
        //         }
        //         .select {
        //             display: flex;
        //             flex: 1;
        //             .select-wrapper {
        //                 flex: 1;
        //                 display: flex;
        //                 align-items: center;
        //                 &:first-child {
        //                     .line {
        //                         &:first-child {
        //                             border-top: none;
        //                         }
        //                     }
        //                 }
        //                 &:last-child {
        //                     .line {
        //                         &:last-child {
        //                             border-top: none;
        //                         }
        //                     }
        //                 }
        //                 .line {
        //                     flex: 1;
        //                     height: 0;
        //                     border-top: px2rem(1) solid #ccc;
        //                 }
        //                 .point-wrapper {
        //                     position: relative;
        //                     flex: 0 0 0;
        //                     width: 0;
        //                     height: px2rem(7);
        //                     border-left: px2rem(1) solid #ccc;
        //                     .point {
        //                         position: absolute;
        //                         top: px2rem(-6);
        //                         left: px2rem(-11);
        //                         width: px2rem(20);
        //                         height: px2rem(20);
        //                         border-radius: 50%;
        //                         border: px2rem(1) solid #ccc;
        //                         background: #ffffff;
        //                         box-shadow: 0 px2rem(4) px2rem(4) rgba(0,0,0,0.15);
        //                         @include center;
        //                         .small-point {
        //                             width: px2rem(5);
        //                             height: px2rem(5);
        //                             background: black;
        //                             border-radius: 50%;
        //                         }
        //                     }
        //                 }
        //             }
        //         }
        //     }

        //     .setting-theme {
        //         width: 100%;
        //         height: 100%;
        //         display: flex;
        //         .setting-theme-item {
        //             flex: 1;
        //             display: flex;
        //             flex-direction: column;
        //             padding: px2rem(5);
        //             box-sizing: border-box;
        //             .preview {
        //                 flex: 1;
        //                 box-sizing: border-box;
        //             }
        //             .text {
        //                 flex: 0 0 px2rem(20);
        //                 font-size: px2rem(14);
        //                 color: #ccc;
        //                 @include center;
        //             }
        //             .no-border {
        //                 border: px2rem(1) solid #ccc;
        //             }
        //             .selected {
        //                 color: #333;
        //             }
        //         }
        //     }

        //     .setting-progress {
        //         position: relative;
        //         width: 100%;
        //         height: 100%;
        //         .progress-wrapper {
        //             width: 100%;
        //             height: 100%;
        //             @include center;
        //             padding: 0 px2rem(30);
        //             box-sizing: border-box;
        //             .progress {
        //                 width: 100%;
        //                 appearance: none;
        //                 height: px2rem(2);
        //                 background: linear-gradient(#999, #999) no-repeat, #ddd;
        //                 background-size: 0 100%;
        //                 &:focus {
        //                     outline: none;
        //                 }
        //                 &::slider-thumb {
        //                     appearance: none;
        //                     height: px2rem(20);
        //                     width: px2rem(20);
        //                     border-radius: 50%;
        //                     background: white;
        //                     box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.15);
        //                     border: px2rem(1) solid #ddd;
        //                 }
        //             }
        //         }
        //     }
        // }
        // .content-mask {
        //     position: absolute;
        //     top: 0;
        //     left: 0;
        //     z-index: 101;
        //     display: flex;
        //     width: 100%;
        //     height: 100%;
        //     background: rgba(51, 51, 51, 0.8);
        // }
    }
</style>
